<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp/hooks'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnModal from '@tuniao/tnui-vue3-uniapp/components/modal/src/modal.vue'

import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'

import { useAppI18n } from '@/hooks/use-i18n'

import type { CSSProperties } from 'vue'

const { navBarInfo } = useUniAppSystemRectInfo()
const { t } = useAppI18n()

// 自定义按钮样式
const customButtonStyle: CSSProperties = {
  padding: '0rpx',
  borderRadius: '0rpx',
}

const userInfo = reactive({
  nickName: t('settings.username'),
  avatarUrl: '',
})

// 友情链接数据
const friendLinkData = ref([
  {
    id: 1,
    name: 'uCharts',
    image: 'https://resource.tuniaokj.com/images/friend_link/1_uCharts.jpg',
    mini_app_id: 'wx37a9ee6a7398dec0',
    mini_app_path: 'demo/home',
    url: '',
  },
  {
    id: 2,
    name: '芊云全景',
    image: 'https://resource.tuniaokj.com/images/friend_link/2_qianyun.jpg',
    mini_app_id: 'wx9f77d65eb4eff65b',
    mini_app_path: 'pages/index/index',
    url: '',
  },
  {
    id: 3,
    name: '前端铺子',
    image: 'https://resource.tuniaokj.com/images/friend_link/3_puzi.jpg',
    mini_app_id: 'wx201efd3f86fa2ba7',
    mini_app_path: 'pages/index/tabbar',
    url: '',
  }
])

// 设置项数据
const settingsData = ref([
  {
    id: 1,
    title: t('settings.account'),
    icon: 'user-fill',
    iconBg: 'tn-gradient-bg__cool-1',
    path: 'pages/settings/account/index',
    action: 'navigate'
  },
  {
    id: 2,
    title: t('settings.password'),
    icon: 'lock-fill',
    iconBg: 'tn-gradient-bg__cool-2',
    path: 'pages/settings/password/index',
    action: 'navigate'
  },
  {
    id: 3,
    title: t('settings.notification'),
    icon: 'notification-fill',
    iconBg: 'tn-gradient-bg__cool-3',
    path: 'pages/settings/notification/index',
    action: 'navigate'
  },
  {
    id: 4,
    title: t('settings.privacy'),
    icon: 'safe-fill',
    iconBg: 'tn-gradient-bg__cool-4',
    path: 'pages/settings/privacy/index',
    action: 'navigate'
  },
  {
    id: 5,
    title: t('settings.about'),
    icon: 'info-fill',
    iconBg: 'tn-gradient-bg__cool-5',
    path: 'pages/index/sub-page/components/about/about',
    action: 'navigate'
  },
  {
    id: 6,
    title: t('settings.logout'),
    icon: 'logout-fill',
    iconBg: 'tn-gradient-bg__cool-6',
    action: 'logout'
  }
])

// 弹出框状态
const showLogoutModal = ref(false)

// 处理设置项点击
const handleSettingClick = (item: any) => {
  if (item.action === 'logout') {
    showLogoutModal.value = true
  } else if (item.action === 'navigate') {
    uni.navigateTo({
      url: `/${item.path}`,
      success: () => {
        console.log('页面跳转成功')
      },
      fail: (err) => {
        console.error('页面跳转失败:', err)
        uni.showToast({
          title: '页面跳转失败',
          icon: 'none',
        })
      }
    })
  }
}

// 退出登录
const logout = () => {
  // 清除用户信息
  uni.removeStorageSync('userInfo')
  uni.removeStorageSync('token')
  
  // 显示退出成功提示
  uni.showToast({
    title: t('settings.logoutSuccess'),
    icon: 'success'
  })
  
  // 延迟跳转到登录页
  setTimeout(() => {
    // 这里可以跳转到登录页面
    uni.reLaunch({
      url: '/pages/login/index'
    })
  }, 1500)
}

// 处理VIP点击
const handleVipClick = () => {
  uni.navigateTo({
    url: '/pages/vip/index',
    success: () => {
      console.log('跳转到VIP页面成功')
    },
    fail: (err) => {
      console.error('跳转到VIP页面失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none',
      })
    }
  })
}

// 处理友情链接点击
const handleFriendLinkClick = (item: any) => {
  // #ifdef MP-WEIXIN
  uni.navigateToMiniProgram({
    appId: item.mini_app_id,
    path: item.mini_app_path,
    success: () => {
      console.log('跳转成功')
    },
    fail: () => {
      uni.showToast({
        title: '跳转失败',
        icon: 'none'
      })
    }
  })
  // #endif
  
  // #ifndef MP-WEIXIN
  uni.showToast({
    title: '请在微信小程序中使用',
    icon: 'none'
  })
  // #endif
}
</script>

// #ifdef MP-WEIXIN
<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true,
  },
}
</script>
// #endif

<template>
  <view class="settings-page">
    <!-- 顶部容器 -->
    <view class="settings-page__top">
      <!-- 背景毛玻璃 -->
      <view class="bg-frosted-glass" />

      <!-- 用户信息容器 -->
      <view
        class="user-info-container tn-flex-center-between"
        :style="{ top: `${navBarInfo.height}px` }"
      >
        <view class="left">
          <view class="user-nickname">{{ userInfo.nickName }}</view>
          <view class="user-desc tn-gray-dark_text">
            {{ t('settings.welcome') }}
          </view>
        </view>
        <view class="right">
          <view class="user-avatar tn-type-primary_bg tn-flex-center">
            <TnIcon name="user-fill" />
          </view>
        </view>
      </view>

      <!-- 设置统计 -->
      <view
        class="settings-stats tn-flex"
        :style="{ top: `${navBarInfo.height}px` }"
      >
        <view class="stat-item tn-flex tn-flex-column">
          <view class="value">6</view>
          <view class="key">{{ t('settings.totalSettings') }}</view>
        </view>
        <view class="stat-item tn-flex tn-flex-column">
          <view class="value">2</view>
          <view class="key">{{ t('settings.securitySettings') }}</view>
        </view>
        <view class="stat-item tn-flex tn-flex-column">
          <view class="value">4</view>
          <view class="key">{{ t('settings.otherSettings') }}</view>
        </view>
      </view>
    </view>

    <view class="settings-page__top--placeholder" />

    <!-- vip信息介绍 -->
    <view class="settings-vip tn-flex-center-between">
      <view class="vip-info">
        <view class="icon">
          <TnIcon
            transparent
            transparent-bg="gradient__settings-vip-icon"
            name="vip"
          />
        </view>
        <view class="join-text tn-gray_text">{{ t('settings.joinVip') }}</view>
      </view>
      <view
        class="operation-btn"
        hover-class="tn-u-btn-hover"
        :hover-stay-time="150"
        @tap="handleVipClick"
      >
        {{ t('settings.joinNow') }}
      </view>
    </view>

    <!-- 设置列表 -->
    <view class="settings-list tn-white_bg">
      <view
        v-for="(item, index) in settingsData"
        :key="item.id"
        class="setting-item"
        @tap.stop="handleSettingClick(item)"
      >
        <view class="item">
          <view class="left">
            <view class="left-icon" :class="item.iconBg">
              <TnIcon :name="item.icon" />
            </view>
            <view class="left-text">{{ item.title }}</view>
          </view>
          <view class="right">
            <TnIcon name="right" />
          </view>
        </view>
      </view>
    </view>

    <!-- 版本信息 -->
    <view class="version-info tn-white_bg">
      <view class="version-text">
        {{ t('settings.version') }}: 1.0.21
      </view>
    </view>

    <!-- 友情链接 -->
    <view class="friend-link">
      <view class="title-container tn-flex-center-between">
        <view class="title">{{ t('settings.friendLink') }}</view>
        <view class="operation">
          <text>{{ t('common.all') }}</text>
          <TnIcon name="right" />
        </view>
      </view>
      <view class="list-container tn-white_bg">
        <view class="list-content tn-flex-nowrap">
          <view
            v-for="(item, index) in friendLinkData"
            :key="index"
            class="list-item tn-flex tn-flex-column items-center"
            @tap.stop="handleFriendLinkClick(item)"
          >
            <view class="logo">
              <image class="image" :src="item.image" mode="aspectFill" />
            </view>
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 退出登录确认弹出框 -->
  <TnModal
    v-model="showLogoutModal"
    :title="t('settings.logoutTitle')"
    :content="t('settings.logoutConfirm')"
    :confirm-text="t('settings.confirm')"
    :cancel-text="t('settings.cancel')"
    @confirm="logout"
  />
  

</template>

<style lang="scss" scoped>
@import './settings.scss';
</style> 